<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue2基础语法</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="d1">
    {{message}} <br>
    count: {{count}} <br>
    student: {{student}} <br>
    <input type="button" value="+" @click="addCount">
    <input type="button" value="-" @click="minusCount">
    <hr>
    你的出生日期【原始写法】：{{
                new Date(948211200000).getFullYear() + '年'
                + (new Date(948211200000).getMonth()+1) + '月'
                + new Date(948211200000).getDate() + "日"}}
    <hr>
    你的出生日期【计算属性】：{{getBirth}}
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    // 定义vue对象将作用于哪个dom节点上
    el: '.d1',
    // 定义模型数据：
    data:{
      message: 'hello,vue2!',
      count: 0,
      student:{"sid":1001,"sname":"小明","sex":"男","age":22,"addr":"上海"}
    },
    // 定义计算属性：
    computed:{
      getBirth(){
        let date = new Date(948211200000)
        return date.getFullYear() + "年" + (date.getMonth() + 1) + '月' +
               date.getDate() + "日"
      }
    },
    // 定义普通方法
    methods:{
      addCount(){
        // this.student.sname = '张小明'
        this.count++
      },
      minusCount(){
        this.count--
      }
    }
  })
</script>
